<template>
  <div ref="onlineChart"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { getOnlineAPI } from '../../../api/admin';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chartInstance = ref(null);
const onlineChart = ref(null);
const onlineList=ref([
  {value:1,name:"在线人数"},
  {value:1,name:"下线人数"},
])

function initChart() {
  chartInstance.value = echarts.init(onlineChart.value);

  const  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '数据来源',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: onlineList.value
      }
    ]
  };
  chartInstance.value.setOption(option);
}

const getONline=async()=>{
  const result=await getOnlineAPI()
  onlineList.value[0].value=result.data.data.online
  onlineList.value[1].value=result.data.data.offline
  // console.log(result.data.data)
}
onMounted(async() => {
  await getONline()
  initChart();
});

// 在组件销毁前执行
// onBeforeUnmount(() => {
//   // 清除图表实例以释放资源
//   if (chartInstance.value) {
//     chartInstance.value.dispose();
//   }
// });
</script>
<style scoped>
div{
  width: 100%;
  height: 100%;
}
</style>